import React, {useState} from 'react';
import {Form, Input, Button, message} from 'antd';
import 'antd/dist/reset.css';
import './Login.css'; // 自定义样式
import {useNavigate} from "react-router";
import {login} from "../../api/login.js";

import backgroundImage from '../../../public/loginBackground.png';

const Login = () => {
    const [form] = Form.useForm();
    const navigate = useNavigate();
    const [loading, setLoading] = useState(false);

    const onFinish = async (values) => {
        setLoading(true);
        try {
            const res = await login(values);
            if (res.data === "登录成功" && res.code === 200) {
                message.success("登录成功");
                goToHome();
            } else if (res.code === 200 && res.data === "账号或密码错误") {
                message.error("账号或密码错误")
            }
        } catch (error) {
            message.error('登录失败');
            console.error(error);
        } finally {
            setLoading(false);
        }
    };

    const goToHome = () => {
        navigate("/pages")
    }

    return (
        <div className="login-container" style={{
            backgroundImage: `url(${backgroundImage})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat'
        }}>
            <div className="login-form-wrapper">
                <div className="login-form">
                    <div style={{textAlign: 'center', marginBottom: 24}}>
                        <h2>
                            <img src="/public/logo.jpg" style={{height: 40, width: 40}}/>学生信息管理系统
                        </h2>
                    </div>
                    <Form
                        form={form}
                        name="login"
                        layout="vertical"
                        onFinish={onFinish}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="用户名"
                            name="username"
                            rules={[{required: true, message: '请输入用户名!'}]}
                        >
                            <Input placeholder="请输入用户名" size="large"/>
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[{required: true, message: '请输入密码!'}]}
                        >
                            <Input.Password placeholder="请输入密码" size="large"/>
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit" block size="large" loading={loading}>
                                登录
                            </Button>
                        </Form.Item>

                        <div style={{textAlign: 'center', marginTop: 16}}>
                            没有账号？
                            <a onClick={() => navigate('/registered')} style={{marginLeft: 8}}>
                                立即注册
                            </a>
                        </div>
                    </Form>
                </div>
            </div>
        </div>
    );
};

export default Login;